<template>
  <div class="legend-row">
    <div class="row" style="margin-right: 10px"><span>雷达:</span></div>
    <div v-for="(item,key) in ladarColor" :key="key" class="cel">
      <div class="rec" :style="{background: item.color}" />
      <span class="val">{{ item.val }}</span>
    </div>

  </div>
</template>

<script>
export default {
    name: 'RainMeasured',
    data() {
        return {
            ladarColor: [
                { val: '0', color: 'rgba(110,248,255,1)' },
                { val: '0.1', color: 'rgba(0,255,255,1)' },
                { val: '1', color: 'rgba(0,107,253,1)' },
                { val: '5', color: 'rgba(0,0,162,1)' },
                { val: '10', color: 'rgba(115,255,138,1)' },

                { val: '15', color: 'rgba(0,255,0,1)' },
                { val: '20', color: 'rgba(0,150,50,1)' },
                { val: '25', color: 'rgba(255,180,0,1)' },
                { val: '30', color: 'rgba(255,255,0,1)' },
                { val: '35', color: 'rgba(196,166,0,1)' },

                { val: '40', color: 'rgba(255,100,100,1)' },
                { val: '50', color: 'rgba(255,0,0,1)' },
                { val: '100', color: 'rgba(128,0,0,1)' },
                { val: '150', color: 'rgba(250,200,250,1)' },
                { val: '200', color: 'rgba(200,100,155,1)' },
                { val: '250', color: 'rgba(150,0,180,1)' }
            ]
        }
    }
}
</script>

<style scoped lang="less">
  @import "./legend";
  .cel{
    display: flex;
    flex-direction: column;
    align-items: center;
    white-space:nowrap;
    .rec{
      width: 32px;
      height: 16px;
      border-radius: 0;
    }
    .val{
      /*margin-right: -16px;*/
      width: 32px;
      text-align: center;
      font-size: 14px;
    }
  }
</style>
